<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Events</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.fx.js"></script>
        <script src="../../source/js/nova.draganddrop.js"></script>
        <script src="../../source/js/nova.resizable.js"></script>
        <script src="../../source/js/nova.splitter.js"></script>
        <script src="../js/nova.console.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Events</div>
        <!-- description -->
        <div id="example" class="n-content">
            <div id="splitter" style="height: 400px">
                <div id="top_pane">
                    <p>
                        Top pane
                    </p>
                </div>
                <div id="ajax_pane">
                    <!-- content loaded with ajax -->
                </div>
                <div id="bottom_pane">
                    <p>
                    Outer splitter : bottom pane
                    </p>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                function onResize(e) {
                    novaConsole.log("Resized :: Splitter #" + this.element[0].id);
                };

                function onExpand(e) {
                    novaConsole.log("Expanded :: Pane #" + e.pane.id + " from splitter #" + this.id + "expanded");
                };

                function onCollapse(e) {
                    novaConsole.log("Collapsed :: Pane #" + e.pane.id + " from splitter #" + this.id + "collapsed");
                };

                function onContentLoad(e) {
                    novaConsole.log("Content loaded in <b>"+ e.pane.id +
                        "</b> and starts with <b>" + $(e.pane).text().substr(0, 20) + "...</b>");
                };

                $("#splitter").novaSplitter({
                    orientation: "vertical",
                    panes: [
                        { collapsible: true, size: "100px" },
                        { collapsible: false, contentUrl: "ajax/ajaxContent1.html" },
                        { collapsible: true, size: "20%" }
                    ],
                    expand: onExpand,
                    collapse: onCollapse,
                    contentLoad: onContentLoad,
                    resize: onResize
                });
            });
        </script>
        <br/>
        <div class="console"></div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
